<template>
    <div>
        <div class="guide-list clearfix">
            <RouterLink active-class="active" v-for="item in guides" :key="item.id" :to="{
                name:item.toViewName  
            }">{{item.name}}
            </RouterLink>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { nanoid } from 'nanoid'
    import { reactive } from 'vue'
    import { RouterLink, RouterView } from 'vue-router'
    let guides = reactive([
        {
            id: nanoid(),
            toViewName: 'Home',
            name: '首页',
        },
        {
            id: nanoid(),
            toViewName: 'Classify',
            name: '分类管理',
        },
        {
            id: nanoid(),
            toViewName: 'Goods',
            name: '商品管理',
        },
        {
            id: nanoid(),
            toViewName: 'Member',
            name: '会员管理',
        },
        {
            id: nanoid(),
            toViewName: 'Order',
            name: '订单管理',
        }
    ])
</script>

<style scoped>
    .guide-list {
        color: #fff;

        a {
            float: left;
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            padding: 0 40px;
            box-sizing: border-box;

            &:hover {
                background-color: #1b2028;
            }

            &.active {
                color: #1baeae;
            }
        }
    }
</style>